import c from 'classnames'
import './LoadingMore.module.less'

export function LoadingMore(props: { isLoading: boolean }) {
  const { isLoading } = props
  const [show, setShow] = useState(false)

  // isLoading 变为 true 时，等待一下再开启显示；变为 false 时，立刻关闭显示
  useEffect(() => {
    if (isLoading) {
      const timeoutId = setTimeout(() => setShow(true), 100)
      return () => clearTimeout(timeoutId)
    } else {
      setShow(false)
    }
  }, [isLoading])

  return <div styleName={c('loading-more', show ? 'show' : '')}>正在加载聊天记录...</div>
}
